<template>
  <div>
    <p class="class-top">账号列表</p>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      @selection-change="selection"
    >
      <el-table-column
        type="selection"
        width="55"
        prop="id"
        select
      ></el-table-column>
      <el-table-column label="账号" prop="account"> </el-table-column>
      <el-table-column prop="userGroup" label="用户组"> </el-table-column>
      <el-table-column prop="ctime" label="创建时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="
              {
                handleEdit(scope.row), (dialogFormVisible = true);
              }
            "
            >编辑</el-button
          >
          <el-button type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 页面跳转 -->
    <div class="block mt20">
      <el-pagination
        :current-page="ctpage"
        @current-change="pagechange"
        :page-size="pagesize"
        layout="total,prev,pager,next"
        :total="total"
      >
      </el-pagination>
    </div>
    <div class="mt20">
      <el-button type="danger" @click="batchBtn">批量删除</el-button>
      <el-button type="primary" @click="toggleSelection()">取消选择</el-button>
    </div>
    <!-- 蒙版层 -->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input
            v-model="form.account"
            autocomplete="off"
            style="width: 220px"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户组" :label-width="formLabelWidth">
          <el-select v-model="form.userGroup" placeholder="请选择用户级别">
            <el-option label="超级管理员" value="超级管理员"></el-option>
            <el-option label="普通管理员" value="普通管理员"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { accountList, accountDel, batchDel, Editaccount } from "@/apis/users";
import { getYYYYMMDD } from "@/utils/utile"; //暴露处理时间的工具函数
export default {
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {     //当前用户的信息
        account: "", //用户的账户
        id: "", //用户当前id
        userGroup: "", //用户组
      },
      formLabelWidth: "120px", //选择框宽度
      userId: [], //存放所有选中用户id
      total: 0, //总条数
      pagesize: 5, //每次显示的页数
      tableData: [], //用户数据
      ctpage: 1, //当前页数
    };
  },
  created() {
    this.reqData();
  },
  methods: {
    pagechange(page) {
      this.ctpage = page; //改变当前页数
      this.reqData();
    },
    //请求的数据
    reqData() {
      accountList({
        currentPage: this.ctpage, //当前页面
        pageSize: this.pagesize,
      }).then((res) => {
        //将数据循环,时间格式改变
        for (let i = 0; i < res.data.data.length; i++) {
          res.data.data[i].ctime = getYYYYMMDD(res.data.data[i].ctime);
        }
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
    },
    //编辑
    handleEdit(row) {
      // console.log(row);
      (this.form.account = row.account),
        (this.form.id = row.id),
        (this.form.userGroup = row.userGroup);
    },
    //删除
    handleDelete(row) {
      accountDel({ id: row.id }).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            type: "success",
            message: "您已成功删除一条数据",
          });
          this.reqData();
        }
      });
    },
    //获取所有选中用户的id
    selection(val) {
      this.userId = [];
      val.forEach((v) => {
        this.userId.push(v.id);
      });
    },
    //批量删除
    batchBtn() {
      batchDel({ ids: JSON.stringify(this.userId) }).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            type: "success",
            message: "您已成功删除选中数据",
          });
          this.reqData();
        }
      });
    },
    //确定修改
    sureEdit() {
      Editaccount({
        id: this.form.id,
        account: this.form.account,
        userGroup: this.form.userGroup,
      }).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            type: "success",
            message: "修改成功",
          });
          this.dialogFormVisible = false;
          this.reqData()
        }
      });
    },
    //取消选中
   toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
  },
};
</script>
<style lang="less" scoped>
.mt20 {
  margin-top: 20px;
}
</style>